<template>
	<view class="wrapper">
		<!-- 个人资料 -->
		<view>
			<view class="top">
				<view class="center" @click="userEdit">
					<view class="center_top">
						<view v-if="user.avatarUrl != null" class="center_img">
							<!-- 这里可以放自己的静态头像 -->
							<image :src="user.avatarUrl">
							</image>
						</view>
						<view v-else class="center_img">
							<!-- 这里可以放自己的静态头像 -->
							<image
								src="https://img2.baidu.com/it/u=3854158804,1500513467&fm=253&fmt=auto&app=120&f=JPEG?w=575&h=500">
							</image>
						</view>
						<view class="center_info">
							<view class="center_name">
								<!-- 这里可以放自己的名称图片 -->
								<view class="nickname">{{ user.nickname }}</view>
								<view class="username">账号：{{ user.username }}</view>
								<view class="phone">{{ user.phone }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 其它 -->
		<u-modal :show="showMoney" :title="title" :content='content' @confirm="confirm" ref="uModal"
			:asyncClose="true"></u-modal>
		<view v-if="user.isAdmin == 1" class="money">
			<u-cell-group>
				<u-cell @click="showMoney = true" icon="red-packet-fill" size="large" title="账户余额" isLink></u-cell>
			</u-cell-group>
		</view>
		<view v-else class="money">
			<u-cell-group>
				<u-cell @click="incomplete" icon="red-packet-fill" size="large" title="账户余额" isLink></u-cell>
			</u-cell-group>
		</view>
		<view>
			<u-cell-group>
				<u-cell @click="incomplete" icon="play-circle-fill" size="large" title="视频号" isLink></u-cell>
				<u-cell @click="incomplete" icon="bookmark" size="large" title="卡包" isLink></u-cell>
				<u-cell @click="incomplete" icon="chat" size="large" title="表情" isLink></u-cell>
				<u-cell @click="incomplete" icon="server-man" size="large" title="联系我们" isLink></u-cell>
				<u-cell @click="incomplete" icon="level" size="large" title="关于我们" isLink></u-cell>
			</u-cell-group>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="exit">
			<u-cell-group>
				<u-cell @click="logout" size="share-square" title="退出登录" isLink></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import { getPetalsById } from '../../api/petals/petals'
export default {
	data() {
		return {
			petals: {},
			user: {},
			showMoney: false,
			title: '零花钱余额',
			content: '0'
		}
	},
	computed: {
	},
	created() {
		this.load()
	},
	methods: {
		load() {
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					this.user = JSON.parse(res.data)
				}
			})
			let userId = {
				userId: this.user.id
			}
			getPetalsById(userId).then(res => {
				this.petals = res.data
				this.content = this.petals.pocketMoney + "元"
			})
		},
		confirm() {
			setTimeout(() => {
				this.showMoney = false;
			}, 1000)
		},
		logout() {
			uni.removeStorageSync('userinfo');
			uni.reLaunch({
				url: '/pages/login/index'
			});
		},
		incomplete() {
			this.$refs.uToast.show({
				type: "error",
				message: "功能正在开发中..."
			})
		},
		userEdit() {
			uni.navigateTo({
				url: '/pages/user/personal'
			})
			setTimeout(() => {
				uni.$emit('user', this.user)
			}, 100)

		}
	}
};
</script>

<style scoped lang="scss">
.top {
	width: 100%;
	height: 150px;
	background: #FF9800;
	padding-top: 15px;
	position: relative;
}

.center {
	border: 1px solid rgb(114, 114, 114);
	width: 90%;
	padding-top: 20rpx;
	height: 100px;
	background: white;
	margin: 0 auto;
	margin-top: 20px;
	border-radius: 10px;
}

.center_top {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 80%;
	padding-bottom: 5px;
	height: 70px;
	margin: 0 auto;
	margin-top: 20rpx;
	border-bottom: 1px solid rgb(196, 196, 196);
}

.center_img {
	width: 66px;
	height: 66px;
}

.center_img image {
	width: 100%;
	height: 100%;
	border-radius: 20%;
}

.center_info {
	display: flex;
	flex-direction: column;
	margin-left: 30px;
}

.center_name {
	font-size: 14px;
}

.wrapper {}

.money {
	margin: 50rpx 0;
}

.exit {
	margin-top: 50rpx;
}

.nickname {
	margin: 5px 0;
}
</style>
